<template>
  <!-- 全部科目余额表记录 -->
  <div class="content-center">
    <div class="content-cotainer border-box">
      <breadcrumb />
      <div class="audit-content">
        <!-- 页面title -->
        <div class="centent-title">
          <span>{{$route.meta.title}}</span>
        </div>
        <!-- 页面主体 -->
        <div class="centent-inner">
          <div class="inner-top-btn">
            <button class="btn btn-primary">
              <span>发送数据</span>
            </button>
            <button class="btn btn-primary">
              <span>查看数据</span>
            </button>
            <button class="btn btn-primary">
              <span>数据分析</span>
            </button>
            <button class="btn btn-primary">
              <span>显示查询条件</span>
            </button>
            <button class="btn btn-primary">
              <span>生成分析数据</span>
            </button>
            <button class="btn btn-primary">
              <span>发送至其他项目</span>
            </button>
            <button class="btn btn-primary">
              <span>打开查询</span>
            </button>
            <button class="btn btn-primary">
              <span>保存查询</span>
            </button>
            <button class="btn btn-primary">
              <span>显示分组区域</span>
            </button>
          </div>
          <div class="unit-box">
            <span class="unit">货币单位：元</span>
          </div>
          <!-- 表格 -->
          <div class="inner-table">
            <el-table
              ref="multipleTable"
              :data="tableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <!-- <el-table-column prop="company" label="单位名称" width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
              </el-table-column>-->
              <!-- <el-table-column label="日期" width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
              </el-table-column>-->
              <el-table-column prop="year" label="年度" width="120"></el-table-column>
              <el-table-column prop="dataType" label="会计数据" width="120"></el-table-column>
              <el-table-column prop="year" label="年度" width="120"></el-table-column>
              <el-table-column prop="subjectNum" label="科目编码" show-overflow-tooltip></el-table-column>
              <el-table-column prop="startBalance" label="期初余额" show-overflow-tooltip></el-table-column>
              <el-table-column prop="dsebitAmount" label="借方发生额" show-overflow-tooltip></el-table-column>
              <el-table-column prop="creditAmount" label="贷方发生额" show-overflow-tooltip></el-table-column>
              <el-table-column prop="endBalance" label="期末余额" show-overflow-tooltip></el-table-column>
              <el-table-column prop="EntryNum" label="分录数" show-overflow-tooltip></el-table-column>
              <el-table-column prop="belong" label="余额方向" show-overflow-tooltip></el-table-column>
              <el-table-column prop="level" label="科目级别" show-overflow-tooltip></el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="inner-pagination">
            <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb";
export default {
  data() {
    return {
      tableData: [
        {
          company: "某公司",
          dataType: "导入审计",
          year: "2019",
          subjectNum: "1",
          startBalance: 0.0,
          dsebitAmount: 1000.0,
          creditAmount: 1000.0,
          endBalance: 10303,
          EntryNum: "2",
          belong: "借",
          level: "1"
        },
        {
          company: "某公司",
          dataType: "导入审计",
          year: "2019",
          subjectNum: "1",
          startBalance: 0.0,
          dsebitAmount: 1000.0,
          creditAmount: 1000.0,
          endBalance: 10303,
          EntryNum: "2",
          belong: "借",
          level: "1"
        },
        {
          company: "某公司",
          dataType: "导入审计",
          year: "2019",
          subjectNum: "1",
          startBalance: 0.0,
          dsebitAmount: 1000.0,
          creditAmount: 1000.0,
          endBalance: 10303,
          EntryNum: "2",
          belong: "借",
          level: "1"
        },
        {
          company: "某公司",
          dataType: "导入审计",
          year: "2019",
          subjectNum: "1",
          startBalance: 0.0,
          dsebitAmount: 1000.0,
          creditAmount: 1000.0,
          endBalance: 10303,
          EntryNum: "2",
          belong: "借",
          level: "1"
        },
        {
          company: "某公司",
          dataType: "导入审计",
          year: "2019",
          subjectNum: "1",
          startBalance: 0.0,
          dsebitAmount: 1000.0,
          creditAmount: 1000.0,
          endBalance: 10303,
          EntryNum: "2",
          belong: "借",
          level: "1"
        }
      ]
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
  components: {
    breadcrumb
  }
};
</script>

<style lang="less" scoped>
.content-cotainer{
  padding: 0 20px 20px 20px;
  height: 100%;
  .centent-inner{
    padding: 0 20px 20px 20px;
  }
}
.inner-top-btn {
  width: 100%;
  height: 32px;
  margin: 20px 0;
  display: flex;
  justify-content: flex-start;
  .btn {
    margin-right: 20px;
  }
}
.unit-box {
  display: flex;
  justify-content: flex-end;
}
</style>
  